<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useGetSupplierQuoteReport } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import { cloneDeep, isNull } from 'lodash-es'
import NP from 'number-precision'

const props = defineProps<{
    categoryId: number | string
    id: string
    projectId: number | string
    title: string
}>()

const tableRef = ref()

const { data, isLoading } = useGetSupplierQuoteReport(ref({ productId: props.id, projectId: props.projectId }))

const isAfterEnding = inject('isAfterEnding')

const gridOptions1 = reactive<VxeGridProps>({
    border: 'none',
    columnConfig: {
        resizable: false,
    },
    columns: [

        { field: 'mgmtRate', slots: { default: 'mgmtRate' }, title: '管理费率', width: 150 },
        { field: 'managementFee', slots: { default: 'managementFee' }, title: '管理费' },
        { field: 'profit', slots: { default: 'profit' }, title: '利润率', width: 150 },
        { field: 'profitPrice', slots: { default: 'profitPrice' }, title: '利润额' },
        { field: 'rate', slots: { default: 'rate' }, title: '税率', width: 150 },
        { field: 'taxes', slots: { default: 'taxes' }, title: '税金' },
        { field: 'quote', slots: { default: 'quote' }, title: '除税价' },
        { field: 'taxIncludedPrice', slots: { default: 'taxIncludedPrice' }, title: '含税价' },
        // { field: 'taxIncludedUnit', slots: { default: 'taxIncludedUnit' }, title: '含税综合单价' },
    ],
    minHeight: 0,
})
const gridOptionsData1 = ref<any[]>([])

const gridOptionsData2 = ref<any[]>([])

function computedTaxes(row: any) {
    const result = NP.round(Number(row.quote ?? 0) * Number(row.rate ?? 0) / 100, 4)
    row.taxes = result
    return result
}

function computedManagementFee(row: any) {
    const result = NP.round(Number(data.value?.totalQuote ?? 0) * Number(row.mgmtRate ?? 0) / 100, 4)
    row.managementFee = result
    return result
}
function computedProfitPrice(row: any) {
    const result = NP.round(Number(data.value?.totalQuote ?? 0) * Number(row.profit ?? 0) / 100, 4)
    row.profitPrice = result
    return result
}

function computeTaxIncludedPrice(row: any) {
    const result = NP.round(Number(row.taxes ?? 0) + Number(row.quote ?? 0), 4)
    row.taxIncludedPrice = result
    return result
}

function computeQuote(row: any) {
    const result = NP.round(Number(row.managementFee ?? 0) + Number(row.profitPrice ?? 0) + Number(data.value?.totalQuote ?? 0), 4)
    row.quote = result
    return result
}

/* function computedtaxIncludedUnit(row: any) {
    row.taxIncludedUnit = 1
    return 1
} */

watchEffect(() => {
    if (data.value) {
        console.log(data.value)
        gridOptionsData1.value = []
        gridOptionsData2.value = []
        const params = {
            mgmtRate: data.value?.mgmtRate ?? null,
            profit: data.value?.profit ?? null,
            quote: data.value?.totalQuote,
            rate: data.value?.rate ?? null,
            rateId: data.value?.rateId ?? '',
        }
        gridOptionsData1.value.push(params)

        gridOptionsData2.value = cloneDeep(data.value?.children || [])
        setTimeout(() => {
            tableRef.value?.setAllTreeExpand(true)
        }, 100)
    }
})

defineExpose({
    gridOptionsData1,
})
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="3"
    />

    <template v-else>
        <div class="title my-20">
            单价汇总
        </div>

        <SearchTable v-bind="gridOptions1"
                     header-cell-class-name="backfff"
                     :data="gridOptionsData1"
        >
            <template #quote="{ row }">
                {{ computeQuote(row) }}元
            </template>

            <template #rate="{ row }">
                <div v-if="isAfterEnding">
                    {{ `${row.rate || 0} %` }}
                </div>

                <div v-else
                     flex
                     gap-10
                     items-center
                >
                    <el-input-number v-model="row.rate"
                                     :min="0"
                                     :max="100"
                                     size="small"
                                     style="width: 100%"
                                     @blur="() => {
                                         row.rate = isNull(row.rate) ? row.rate : NP.round(row.rate, 1)
                                     }"
                    />
                    %
                </div>
            </template>

            <template #taxes="{ row }">
                {{ computedTaxes(row) }}元
            </template>

            <template #mgmtRate="{ row }">
                <div v-if="isAfterEnding">
                    {{ `${row.mgmtRate || 0} %` }}
                </div>

                <div v-else
                     flex
                     gap-10
                     items-center
                >
                    <el-input-number v-model="row.mgmtRate"
                                     :min="0"
                                     :max="100"
                                     size="small"
                                     style="width: 100%"
                                     @blur="() => {
                                         row.mgmtRate = isNull(row.mgmtRate) ? row.mgmtRate : NP.round(row.mgmtRate, 1)
                                     }"
                    />
                    %
                </div>
            </template>

            <template #managementFee="{ row }">
                {{ computedManagementFee(row) }}元
            </template>

            <template #profit="{ row }">
                <div v-if="isAfterEnding">
                    {{ `${row.profit || 0} %` }}
                </div>

                <div v-else
                     flex
                     gap-10
                     items-center
                >
                    <el-input-number v-model="row.profit"
                                     :min="0"
                                     :max="100"
                                     style="width: 100%"
                                     size="small"
                                     @blur="() => {
                                         row.profit = isNull(row.profit) ? row.profit : NP.round(row.profit, 1)
                                     }"
                    />
                    %
                </div>
            </template>

            <template #profitPrice="{ row }">
                {{ computedProfitPrice(row) }}元
            </template>

            <template #taxIncludedPrice="{ row }">
                <span class="text-#DA0004">{{ computeTaxIncludedPrice(row) }}元</span>
            </template>

            <!-- <template #taxIncludedUnit="{ row }">
                <span class="text-#DA0004">{{ computedtaxIncludedUnit(row) }}元</span>
            </template> -->
        </SearchTable>

        <div class="title my-20">
            单价组成
        </div>

        <vxe-table ref="tableRef"
                   :column-config="{ resizable: true }"
                   :tree-config="{ rowField: 'id', parentField: 'parentId' }"
                   :data="gridOptionsData2"
                   align="center"
                   show-overflow
                   border
                   min-height="0"
                   :tooltip-config="{ zIndex: 9999 }"
        >
            <vxe-column field="categoryName"
                        title="名称"
                        align="left"
                        tree-node
                        width="250"
            />

            <vxe-column field="model"
                        title="规格型号"
            />

            <vxe-column field="actualUsage"
                        title="计算用量"
            />

            <vxe-column field="unit"
                        title="单位"
            />

            <vxe-column field="quote"
                        title="综合单价"
            >
                <template #default="{ row }">
                    {{ row.quote ? `${row.quote}元` : '' }}
                </template>
            </vxe-column>

            <vxe-column field="totalQuote"
                        title="税前总价"
            >
                <template #default="{ row }">
                    {{ row.totalQuote ? `${row.totalQuote}元` : '' }}
                </template>
            </vxe-column>
        </vxe-table>
    </template>
</template>

<style lang="scss" scoped>
.title {
    font-size: 16px;
    font-weight: bold;
}

:deep(.el-card),
:deep(.el-card__footer) {
    border: none !important;
}
</style>
